import $_ from "lodash";
import { IBind, ICmpnt, isPage } from "xcore/cmpnt";
import { bindProperty, getName } from "../bind/index"
import { AttrHandler, IPropertyItem } from "../../types";
import $data from "xcore/data";
import bars from "../bind/index";
import { reactive } from "vue";


export const getAttrs: AttrHandler = (pis: IPropertyItem[], cmpnt: ICmpnt, _, label?: string, devided?: boolean) => {
    let attr: IPropertyItem = { icon: "fa fa-bars", label: label ?? "基础配置", devided: devided ?? false };

    // 检查 pis 中是否已经存在相同的 label
    const labelExists = pis.some(item => item.label === attr.label);
    if (labelExists) {
        return;
    }
    attr.children = [];
    let childrenPops = $_.values(bindProperty(cmpnt.props, cmpnt.props.bind))
    let props = $_.values(bindProperty(cmpnt, cmpnt.props.bind))

    attr.children.push({ label: "基本属性", group: true });
    if (childrenPops && childrenPops.length > 0)
        attr.children.push(...childrenPops);
    if (props && props.length > 0)
        attr.children.push(...props);


    //绑定样式信息
    let count = addStyle(cmpnt.props, attr.children, cmpnt.props.bind);
    if (props && props.length > 0 || count > 0 || childrenPops && childrenPops.length > 0) {
        pis.push(attr);
    }

    //添加切换主题菜单
    addSwitchThemes(pis, cmpnt)

    //添加 分组属性
    let index = props && props.length > 0 || cmpnt.props.style ? 0 : -100;
    $_.keys(cmpnt.props).forEach(key => {
        if ($_.endsWith(key, "Group") && cmpnt.props[key]) {
            index++
            let labelName = getName(key.replace("Group", ""))
            labelName = labelName.length >= 4 ? labelName : `${labelName}设置`;
            let attrGroup: IPropertyItem = { icon: "fa fa-css3", label: labelName, devided: index === 1 };
            // 检查 pis 中是否已经存在相同的 label
            const labelExists = attr.children?.some(item => item.label === attrGroup.label);
            if (labelExists) {
                return;
            }
            attrGroup.children = [];
            attrGroup.children.push({ label: "基本属性", group: true });
            attrGroup.children.push(...$_.values(bindProperty(cmpnt.props[key], cmpnt.props.bind)));
            addStyle(cmpnt.props[key], attrGroup.children, cmpnt.props.bind);
            pis.push(attrGroup);
        }
    });
}
function addStyle(obj: any, children: any[], bind: IBind): number {
    let count = 0
    $_.keys(obj).forEach(key => {
        if ($_.endsWith(key.toLocaleLowerCase(), "style") && obj[key] && $_.keys(obj[key]).length > 0) {
            let labelName = getName(key)
            labelName = labelName.length >= 4 ? labelName : `${labelName}设置`;
            children.push({ label: labelName, group: true });
            children.push(...$_.values(bindProperty(obj[key], bind)));
            count++
        }
    });
    return count
}

//添加 切换主题 菜单
export function addSwitchThemes(children: any[], cmpnt: ICmpnt) {
    if (!isPage(cmpnt)) return
    let themeGroup: IPropertyItem = { icon: "fa fa-dashboard", label: `我的主题` };
    // 检查 pis 中是否已经存在相同的 label
    const labelExists = children.some(item => item.label === themeGroup.label);
    if (labelExists) {
        return;
    }
    themeGroup.children = reactive([]);
    addThemesChildren(themeGroup.children, cmpnt)
    children.push(themeGroup);
}

//列出所有主题，和 保存主题按钮
function addThemesChildren(children: any[], cmpnt: ICmpnt) {

    let inputSave = bars.designer.find("InputSave").clone()
    inputSave.props.text = "保存"
    inputSave.props.placeholder = "请输入主题名称"
    inputSave.props.info = "输入已存在的主题名称将覆盖原有主题"
    inputSave.props.style = {
        width: "260px"
    }
    inputSave.events.change = (text: string) => {
        //保存主题, 并添加到列表中
        let theme = $data.theme.save(cmpnt, text)
        addOneTheme(children, cmpnt, theme)

    }
    //添加保存主题按钮
    let saveTheme: IPropertyItem = { label: "", cmpnt: inputSave, data: {} };
    children.push(saveTheme);

    //添加主题列表
    listThemes(children, cmpnt)
}


function listThemes(children: any[], cmpnt: ICmpnt): number {
    let themes = $data.theme.list(cmpnt)
    themes.forEach((theme, index) => {
        addOneTheme(children, cmpnt, theme, index === 0)

    });
    return themes.length

}
function addOneTheme(children: any[], cmpnt: ICmpnt, theme: any, devided?: boolean) {
    let index = children.findIndex(item => item.data.label === theme.name)
    if (index >= 0) {
        return;
    }
    let showCmpnt = bars.designer.find("labelRm").clone()
    showCmpnt.events.change = (text: string) => {
        //删除主题, 并从列表中删除
        $data.theme.delete(cmpnt, text)
        let index = children.findIndex(item => item.data.label === theme.name)
        if (index >= 0) {
            children.splice(index, 1)
        }
    }
    //添加主题按钮
    let item: IPropertyItem = { label: "", cmpnt: showCmpnt, data: { label: theme.name }, devided: devided };
    item.events = {
        click: () => {
            //应用主题
            $data.theme.apply(cmpnt, theme.name)
        }
    };
    children.push(item);
}

